<template>
	<view class="sa_content">
		<!-- 返回，默认返回首页 -->
		<view class="sa_return">
			<image :src="HTTP_IMG_UTL+'fanhui.png'" style="width: 28rpx;height: 40rpx;" mode=""
				@click="handelReturn" />
			<view></view>
		</view>
		<!-- 认证您的身份 -->
		<view class="sa_imgs">
			<image :src="HTTP_IMG_UTL+'authentication_282@2x.png'" mode=""
				style="width:376rpx;height: 55rpx;" v-if="lang==='zh'" />
			<view v-if="lang==='ru'" style="font-size: 36rpx;font-weight: bold;">Подтверждение информации вашей компании
			</view>
			<view style="color: #404040;margin-top: 18rpx;" v-if="lang==='zh'">将获得智能助手，精准推送及专属图标</view>
			<view style="color: #404040;margin-top: 18rpx;" v-if="lang==='ru'">Получить виртуального помощника,
				push-уведомления и эксклюзивный значок</view>
		</view>
		
		<!-- 服务范围文字 -->
		<view class="sa_nationality_title">
			<view>{{$t('服务范围')}}</view>
		</view>
		<view class="sa_sales">
			<u-input :clearable="clearable"  maxlength="200" count :placeholder="$t('请输入服务范围')" v-model="value" :type="type" :border="border" :height="heights" :auto-height="autoHeight" />
		</view>
		
		<!-- 可提供服务（多选）文字 -->
		<view class="sa_nationality_title">
			<view>{{$t('可提供服务（多选）')}}</view>
		</view>
		<!-- 俄文显示 -->
		<view class="sa_ru_type" v-if="lang==='ru'">
			<u-checkbox-group @change="checkboxGroupChange" style="width: 100%;">
				<view class="checkbox-group">
					<view v-for="(item,index) in listCheckbox" :key="index" class="checkbox_item">
						<view class="che_list">
							<image style="width: 64rpx;height: 68rpx;" :src="HTTP_IMG_UTL+'list_44@4x.png'" mode="" v-if="item.id==='1'"></image>
							<image style="width: 64rpx;height: 64rpx;" :src="HTTP_IMG_UTL+'list_33@4x1.png'" mode="" v-if="item.id==='2'"></image>
							<image style="width: 64rpx;height: 68rpx;" :src="HTTP_IMG_UTL+'list_11@4x2.png'" mode="" v-if="item.id==='3'"></image>
							<image style="width: 64rpx;height: 51rpx;" :src="HTTP_IMG_UTL+'list_66@4x3.png'" mode="" v-if="item.id==='4'"></image>
							<image style="width: 64rpx;height: 65rpx;" :src="HTTP_IMG_UTL+'list_22@4x4.png'" mode="" v-if="item.id==='5'"></image>
							<image style="width: 64rpx;height: 68rpx;" :src="HTTP_IMG_UTL+'list_55@4x5.png'" mode="" v-if="item.id==='6'"></image>
							<text class="checkbox-text">{{item.name}}</text>
						</view>
					
						<u-checkbox :name="item.id" v-model="item.checked" />
					</view>
				</view>
			</u-checkbox-group>
		</view>
		<!-- 中文显示 -->
		<view class="sa_service" v-if="lang==='zh'">
			<view class="sa_service_top">
				<view :class="serverObj.one?'sa_service_top_block':'sa_service_top_block_active'" @click="handeleServer(1)">
					<image style="width: 64rpx;height: 68rpx;" :src="HTTP_IMG_UTL+'list_44@4x.png'" mode=""></image>
					<view style="font-size: 32rpx;font-weight: 600;margin-left: 20rpx;">报关</view>
				</view>
				<view :class="serverObj.tow?'sa_service_top_block':'sa_service_top_block_active'" @click="handeleServer(2)">
					<image style="width: 64rpx;height: 64rpx;" :src="HTTP_IMG_UTL+'list_33@4x1.png'" mode=""></image>
					<view style="font-size: 32rpx;font-weight: 600;margin-left: 20rpx;">清关</view>
				</view>
				<view :class="serverObj.three?'sa_service_top_block':'sa_service_top_block_active'" @click="handeleServer(3)">
					<image style="width: 64rpx;height: 64rpx;" :src="HTTP_IMG_UTL+'list_11@4x2.png'" mode=""></image>
					<view style="font-size: 32rpx;font-weight: 600;margin-left: 20rpx;">转关</view>
				</view>
			</view>
			<view class="sa_service_top">
				<view :class="serverObj.four?'sa_service_top_block':'sa_service_top_block_active'" @click="handeleServer(4)">
					<image style="width: 64rpx;height: 51rpx;" :src="HTTP_IMG_UTL+'list_66@4x3.png'" mode=""></image>
					<view style="font-size: 32rpx;font-weight: 600;margin-left: 20rpx;">运输</view>
				</view>
				<view :class="serverObj.five?'sa_service_top_block':'sa_service_top_block_active'" @click="handeleServer(5)">
					<image style="width: 64rpx;height: 65rpx;" :src="HTTP_IMG_UTL+'list_22@4x4.png'" mode=""></image>
					<view style="font-size: 32rpx;font-weight: 600;margin-left: 20rpx;">仓储</view>
				</view>
				<view :class="serverObj.six?'sa_service_top_block':'sa_service_top_block_active'" @click="handeleServer(6)">
					<image style="width: 64rpx;height: 64rpx;" :src="HTTP_IMG_UTL+'list_55@4x5.png'" mode=""></image>
					<view style="font-size: 32rpx;font-weight: 600;margin-left: 20rpx;">装卸</view>
				</view>
			</view>
		</view>
		
		<!-- 常用口岸文字 -->
		<view class="sa_nationality_title">
			<view>{{$t('常用口岸')}}</view>
			<image @click="handeleAddNationality" style="width: 30rpx;height: 30rpx;" :src="HTTP_IMG_UTL+'add_239@2x.png'" mode=""></image>
		</view>
		
		
		<view class="sa_customs">
			<view v-for="(item,index) in portList" :key="index" class="portList">
				<formCity :texthidden="true"  :is_register="1" :item="item" :is_port="true" @change="selCity" />
				<view style="display: flex;align-items: center;">
					<image :src="HTTP_IMG_UTL+'register_223@2x.png'" style="width: 20rpx;height: 12rpx;margin-right: 10rpx;" mode=""/>
					<image v-if="portList.length>1" @click="handeleDelNationality(index)" style="width: 30rpx;height: 30rpx;margin-left: 20rpx;" :src="HTTP_IMG_UTL+'del_242@2x.png'" mode=""></image>
				</view>
	
			</view>
			<view style="width: 100%;height: 1rpx;background-color: #F3F3F3;"></view>
		</view>
		
		<!-- 营业执照文字 -->
		<view class="sa_License_title">
			<view v-if="lang==='zh'">{{$t('营业执照')}} ({{$t('选填')}})</view>
			<view v-if="lang==='ru'">{{$t('认证视频')}} ({{$t('选填')}})</view>
		</view>
		<view class="sa_detail" v-if="lang==='ru'">
			Запишите видеоподтверждение, в котором вы произносите следующее: “Я представитель компании по грузоперевозкам. Хочу найти заказы на доставку грузов на платформе GLUZ и предлагаю свои услуги по таможенному оформлению, в связи с этим подаю заявку на подтверждение.”
		</view>
		<view class="sa_images">
			<!-- 上传图片 -->
			<u-upload 
			v-if="lang==='zh'"
					  style="margin-top: 30rpx;padding: 0rpx;margin-left: -10rpx;"
			          :action="action"
			          :file-list="list"
			          :max-size="imageMaxSize"
					  :max-count="max_count" 
			          :width="width"
			          :height="height"
			          :auto-upload="autoUpload"
			          :show-upload-list="showUploadList"
			          :del-bg-color="delBgColor"
			          :del-color="delColor"
			          :upload-text="uploadText"
			          :limit-type="limitType"
			          @on-success="onSuccess"
			          @on-remove="onRemove"
					  :show-progress="showProgress"
			/>
		</view>
		<view v-if="lang==='ru'" style="margin-top: 68rpx;width: 100%;display: flex;justify-content: center;">
			<formVideos :item="formItem" :postvideo="videoData" :postid="postId" @change="selVideos" />
		</view>
		<view class="sa_but">
			<view class="but_left">
				<u-button @click="handelPreviouspage">{{$t('上一步')}}</u-button>
			</view>
			<view class="but_right">
				<u-button class="custom-style" @click="submit" :disabled="isDisabled" :loading="isLoading">{{$t('认证')}}</u-button>
			</view>
		</view>
		<view class="backColor"></view>
	</view>
</template>

<script>
	import {
		IMAGE_URL,
		HTTP_IMG_UTL
	} from "@/config/app";
	import formCity from "@/components/buildForm/formCity.vue";
	import formVideos from "./components/formVideos.vue";
import {HTTP_REQUEST_URL, IMAGE_MAX_SIZE, IMAGE_MAX_COUNT} from '@/config/app';
	export default {
		components: {
			formVideos,
			formCity
		},
		data() {
			return {
				HTTP_IMG_UTL,
				isDisabled:false,
				isLoading:false,
				portList:[ //常用口岸
					{
						key: "city_id",
						label: false,
						placeholder: this.$t('请选择常用口岸'),
						type: "city",
						required: true,
						value: [],
						rules: {},
					},
				],
				
				// 判断中文图标选中状态，没有使用数组方式，见笑了
				serverObj:{
					one:false,
					tow:false,
					three:false,
					four:false,
					five:false,
					six:false
				},
				listCheckbox: [//协议选择的状态
					{ 
					name: 'Таможенная декларация',
					id:'1',
					checked: false,
					disabled: false
					},
					{
					name: 'Таможенная очистка',
					id:'2',
					checked: false,
					disabled: false
					},
					{
					name: 'Таможенный транзит',
					id:'3',
					checked: false,
					disabled: false
					},
					{
					name: 'Транспорт',
					id:'4',
					checked: false,
					disabled: false
					},
					{
					name: 'Склад',
					id:'5',
					checked: false,
					disabled: false
					},
					{
					name: 'Погрузка и раззгрузка',
					id:'6',
					checked: false,
					disabled: false
					},
				],
				formItem: {
					required: false,
					label: '',
					key: 'video',
					value: []
				},
				videoData: '', // 假设这是视频URL或相关数据
				postId: 0, // 假设这是商品或帖子的ID
				// ------------------------------------------------
				showProgress:false,//图片上传配置
				width:'600',//图片上传配置
				height:'212',//图片上传配置
				autoUpload: true,//图片上传配置
				showUploadList: true,//图片上传配置
				delBgColor: '#fa3534',//图片上传配置
				delColor: '#ffffff',//图片上传配置
				max_count:1,//图片上传的最大数量
				action: HTTP_REQUEST_URL + '/common/upload',//服务器上传地址
				imageMaxSize: IMAGE_MAX_SIZE,//图片上传配置
				imageMaxCount: IMAGE_MAX_COUNT,//图片上传配置
				uploadText: this.$t('请上传营业执照副本照片'),//图片上传配置
				limitType: ['png', 'jpg', 'jpeg', 'webp', 'gif', 'image'],//图片上传配置
				clearable:false,
				value: '',//承接业务
				type: 'textarea',
				border: true,
				heights: 218,
				autoHeight: true,
				lang: 'zh',
				nowLang: 'zh', //获取协议接口使用的当前语言
				list: [],//默认显示的图片列表，数组元素为对象，必须提供url属性
				formDatas:[],//图片列表
				data:{},
				userid:"",//userid
				videoUrl:'', //视频地址
				SelectCategory:[],//俄罗斯用户选中的可提供服务
				Commonl:[],//常用口岸
			}
		},
		onLoad(option) {
			console.log(JSON.parse(option.data));
			this.data = JSON.parse(option.data)
			
		},
		onShow() {
			this.nowLang = this.$i18n.locale
			// 获取当权语言
			this.getLang()
		},
		methods: {
			// 获取到视频
			selVideos(key, value) {
				this.videoUrl = value[0].url
			},
			// 认证
			submit() {
				
				if (this.value === '') {
					uni.showToast({
						title: this.$t('请输入服务范围'),
						icon: 'none',
						duration: 1000
					})
				}else if(this.SelectCategory.length == 0){
					uni.showToast({
						title: this.$t('请至少选择一项服务'),
						icon: 'none',
						duration: 1000
					})
				}else if(this.Commonl.length == 0){
					uni.showToast({
						title: this.$t('请至少选择一个常用口岸'),
						icon: 'none',
						duration: 1000
					})
				}else if(this.lang==='zh'){ //如果为中国则检查图片是否为空，为空则提示
					this.getApi()
					return;
					if(this.formDatas.length===0){
						uni.showToast({
							title: this.lang==='zh'?this.$t('请上传营业执照副本照片'):this.$t('请上传视频'),
							icon: 'none',
							duration: 1000
						})
					}else {
						this.getApi()
					}
				}else if(this.lang === 'ru'){ //如果为俄罗斯则检查视频是否为空，为空则提示
					this.getApi()
					return;
					if(this.videoUrl===''){
						uni.showToast({
							title: this.lang==='zh'?this.$t('请上传营业执照副本照片'):this.$t('请上传视频'),
							icon: 'none',
							duration: 1000
						})
					}else{
						this.getApi()
					}
				}
			},
			// 认证接口
			getApi(){
				if (this.lang === 'zh') {
				    this.SelectCategory = this.SelectCategory.map(item => {
				        switch (item) {
				            case '1': return '报关';
				            case '2': return '清关';
				            case '3': return '转关';
				            case '4': return '运输';
				            case '5': return '仓储';
				            case '6': return '装卸';
				            default: return item;
				        }
				    });
				} else if (this.lang === 'ru') {
				    this.SelectCategory = this.SelectCategory.map(item => {
				        switch (item) {
				            case '1': return 'Таможенная декларация';
				            case '2': return 'Таможенная очистка';
				            case '3': return 'Таможенный транзит';
				            case '4': return 'Транспорт';
				            case '5': return 'Склад';
				            case '6': return 'Погрузка и разгрузка';
				            default: return item;
				        }
				    });
				}
				let Categorys = this.SelectCategory.toString()
				this.data.provide_services = Categorys //服务范围
				this.data.kouan_id = this.Commonl.toString() //常用口岸
				// this.data.product = this.product //承接业务
				this.data.main_product = this.value  //服务范围
				// 如果长度大于0，证明存在数据，则赋值给license_image
				if(this.formDatas.length!==0){
					this.data.license_image = this.formDatas.toString()
				}
				
				this.data.agent_code = ""  //暂时无所谓
				this.data.user_id = this.userid //用户id
				this.data.video = this.videoUrl?this.videoUrl:''//视频
				this.isDisabled=true,
				this.isLoading=true,
				console.log('this.data.main_product:',this.data.provide_services);
				this.$u.api.release.newProfile(this.data).then(res => {
					this.isDisabled=false,
					this.isLoading=false,
					// 给用户一个提示
					uni.showToast({
						title: this.$t('认证成功'),
						icon: 'none',
						duration: 1000
					})
					// 一秒后跳转到认证页面
							
					setTimeout(() => {
						uni.switchTab({
							url: '/pages/tabbar/index'
						})
					}, 1000)
				}).catch(err => {
					this.isDisabled=false,
					this.isLoading=false,
					uni.showToast({
						title: this.$t('认证失败'),
						icon: 'none',
						duration: 1000
					})
				})
			},
			// 常用口岸
			selCity(key, value) {
				
				this.Commonl.push(value[2].value)
				
				
			},
			// 批量添加常用口岸
			handeleAddNationality(){
				this.portList.push({
						key: "city_id",
						label: false,
						placeholder: this.$t('请选择常用口岸'),
						type: "city",
						required: true,
						value: [],
						rules: {},
					})
			},
			// 删除常用口岸
			handeleDelNationality(index){
				uni.showModal({
					title: this.$t('温馨提示'),
					content: this.$t('确认删除此类目'),
					cancelText: this.$t('否'),
					confirmText: this.$t('是'),
					success: res => {
						if (res.confirm) {
							this.portList.splice(index,1)
							this.Commonl.splice(index,1)
							
						}
					}
				})
				
			},
			// 点击图标修改状态与获取数据
			handeleServer(index){
				switch (index) {
					case 1:
						this.serverObj.one = !this.serverObj.one
						if(this.serverObj.one){
							this.SelectCategory.push('1')
						}else{
							let index = this.SelectCategory.indexOf('1');
							this.SelectCategory.splice(index, 1);
						}
						break;
					case 2:
						this.serverObj.tow = !this.serverObj.tow
						if(this.serverObj.tow){
							this.SelectCategory.push('2')
						}else{
							let index = this.SelectCategory.indexOf('2');
							this.SelectCategory.splice(index, 1);
						}
						break;
					case 3:
						this.serverObj.three = !this.serverObj.three
						if(this.serverObj.three){
							this.SelectCategory.push('3')
						}else{
							let index = this.SelectCategory.indexOf('3');
							this.SelectCategory.splice(index, 1);
						}
						break;
					case 4:
						this.serverObj.four = !this.serverObj.four
						if(this.serverObj.four){
							this.SelectCategory.push('4')
						}else{
							let index = this.SelectCategory.indexOf('4');
							this.SelectCategory.splice(index, 1);
						}
						break;
					case 5:
						this.serverObj.five = !this.serverObj.five
						if(this.serverObj.five){
							this.SelectCategory.push('5')
						}else{
							let index = this.SelectCategory.indexOf('5');
							this.SelectCategory.splice(index, 1);
						}
						break;
					case 6:
						this.serverObj.six = !this.serverObj.six
						if(this.serverObj.six){
							this.SelectCategory.push('6')
						}else{
							let index = this.SelectCategory.indexOf('6');
							this.SelectCategory.splice(index, 1);
						}
						break;
					default:
						console.log('Role not recognized');
				}
			},
			checkboxGroupChange(e) {
				this.SelectCategory = e
			},
			// 返回上一页
			handelPreviouspage(){
				uni.navigateBack()
			},
			// 获取当权语言
			getLang() {
				// 获取缓存lang当前语言值
				uni.getStorage({
					key: 'lang',
					success: res => {
						if (res.data == 'zh') { //zh为中国，赋值0
							this.lang = 'zh'
						} else { //其他为俄罗斯，赋值1
							this.lang = 'ru'
						}
					}
				});
				uni.getStorage({
					key: 'user_id',
					success: res => {
						this.userid = res.data
					}
				});
			},
			// 返回上一页
			handelReturn() {
				uni.navigateBack()
			},
			// 上传成功
			onSuccess(data, index, lists, name) {
			  // 将照片插入数组
			  this.formDatas.push(lists[0].response.data.url) 
			},
			// 删除图片
			onRemove(index, lists, name) {
			  //删除照片
			  this.formDatas.splice(index,1)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.checkbox-group{
		width: 100%;
	}
	.backColor{
		width: 100%;
		height: 1202rpx;
		background: linear-gradient(180deg, #E1F8C7 -3%, rgba(255, 255, 255, 0.2) 56%);
		position: absolute;
		top: 0;
		z-index: -1;
	}
	.portList{
		width: 100%;
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.che_list{
		width: 70%;
		display: flex;
		align-items: center;
		
	}
	.checkbox-text{
		font-size: 24rpx;
		margin-left: 44rpx;
	}
	.checkbox_item {
		width: 100%;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.sa_detail {
		width: calc(100% - 60rpx);
		margin-top: 32rpx;
		font-size: 24rpx;
		color: #A4A4A4;
	}
	.sa_service_top_block_active{
		width: 220rpx;
		height: 104rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 16rpx;
		border: 1rpx solid  #CCCCCC;
		background: #FFFFFF;
	}
	.sa_service_top_block{
		width: 220rpx;
		height: 104rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 16rpx;
		background: linear-gradient(132deg, #D3EF93 -1%, rgba(229, 245, 203, 0.24) 95%);
	}
	.sa_service_top{
		width: 100%;
		height: 180rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		// margin-top: 30rpx;
	}
	.sa_ru_type{
		width: calc(100% - 60rpx);
	}
	.sa_service{
		width: calc(100% - 60rpx);
		height: 250rpx;
		display: flex;
		flex-direction: column;
		margin-bottom: -20rpx;
		margin-top: 20rpx;
	}
	.sa_customs{
		width: calc(100% - 60rpx);
		// height: 80rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
		// border-bottom: 1rpx solid #F3F3F3;
	}
	.custom-style {
		background-color: #000000;
		color: #ffffff;
	}
	.but_left{
		width: 20%;
	}
	.but_right{
		width: 75%;
	}
	.sa_but{
		margin: 100rpx 0 100rpx 0;
		width: calc(100% - 60rpx);
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.sa_images{
		width: calc(100% - 60rpx);
		display: flex;
		justify-content: flex-start;
	}
	.sa_License_title{
		width: calc(100% - 60rpx);
		font-size: 28rpx;
		display: flex;
		justify-content: flex-start;
		font-weight: 600;
		margin-top: 30rpx;
	}
	.sa_sales{
		width: calc(100% - 60rpx);
		margin-top: 24rpx;
	}
	.sa_nationality_title {
		width: calc(100% - 60rpx);
		font-size: 28rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-weight: 600;
		margin-top: 60rpx;
	}

	.sa_imgs {
		margin-top: 18rpx;
		width: calc(100% - 60rpx);
		display: flex;
		flex-direction: column;
	}

	.sa_return {
		margin-top: 110rpx;
		width: calc(100% - 60rpx);
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.sa_content {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
</style>